<template>
    <div class="eeaymt">
       <!-- <router-view/>-->
        <div class="layout">
            <div><h2>员工权限管理</h2></div>
            <div class="table">
              
                <div>
                    <div><h3>公司账号管理</h3></div>
                     <div>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
        <el-row :gutter="20">
          <!-- 搜索框 -->
          <el-col :span="8">
            <el-input
              placeholder="请输入账号进行搜索"
              v-model="input"
              clearable
              size="medium"
            >
              <el-button
                type="primary"
                slot="append"
                icon="el-icon-search"
                @click="search()"
              ></el-button>
            </el-input>
          </el-col>
            <!-- 新增按钮 -->
          <el-col :span="8">
              <el-button
                type="primary"
                @click="adds()"
                icon="el-icon-circle-plus"
                >新增</el-button
              >
          </el-col>
        </el-row>

        <!-- 用户列表区域 -->
        <el-table :data="tableData" stripe style="width: 100%" border >
          <el-table-column type="index"  label="序号">
          </el-table-column>
          <el-table-column prop="number" label="账号">
          </el-table-column>
          <el-table-column prop="name" label="姓名">
          </el-table-column>
          <el-table-column prop="tell" label="联系电话">
          </el-table-column>
          <el-table-column prop="role" label="角色">
          </el-table-column>
          <el-table-column prop="position" label="岗位">
          </el-table-column>
          <el-table-column prop="department" label="部门">
          </el-table-column>
          <el-table-column prop="time" label="创建时间">
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.mg_state"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width='300px'>
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button
                type="success"
                icon="el-icon-edit"
                @click="sets(scope.row)"
                size="mini"
                >修改</el-button
              >
              <!-- 删除 -->
              <el-button
                type="danger"
                @click="removes(scope.row)"
                size="mini"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加弹出框 -->
        <el-dialog title="新增账号" :visible.sync="el_show">
          <el-form>
            <el-form-item label="账号" :label-width="formLabelWidth">
              <el-input
                placeholder="请输入账号"
                v-model="number"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input
                v-model="name"
                autocomplete="off"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <el-input
                v-model="tell"
                autocomplete="off"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
              <el-input
                placeholder="请输入角色"
                v-model="role"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="岗位" :label-width="formLabelWidth">
              <el-input
                placeholder="请输入岗位"
                v-model="position"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
              <el-input
                placeholder="请输入部门"
                v-model="department"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <el-input
                placeholder="请输入创建时间"
                v-model="time"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pushs()">新 增</el-button>
            <el-button @click="err()">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 修改弹出框 -->
        <el-dialog title="修改信息" :visible.sync="el_xiu">
          <el-form>
            <el-form-item label="修改账号" :label-width="formLabelWidth">
              <el-input
                placeholder="请输入技能名称"
                v-model="newtable.number"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="修改姓名" :label-width="formLabelWidth">
              <el-input v-model="newtable.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="修改联系电话" :label-width="formLabelWidth">
              <el-input v-model="newtable.tell" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="修改角色" :label-width="formLabelWidth">
              <el-input v-model="newtable.role" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="修改岗位" :label-width="formLabelWidth">
              <el-input
                v-model="newtable.position"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="修改部门" :label-width="formLabelWidth">
              <el-input
                v-model="newtable.department"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="修改创建时间" :label-width="formLabelWidth">
              <el-input v-model="newtable.time" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="trueset()">修 改</el-button>
            <el-button @click="xg_err()">取 消</el-button>
          </div>
        </el-dialog>
     
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[6, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="6"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
export default {
  data() {
    return {
      searchs: [],
      input: null,
      // 查找列表
      searchtableData: [
        {
          number: '1828001',
          name: '李四',
          tell: '10086',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 0,
        },
        {
          number: '1828002',
          name: '天一',
          tell: '110',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 1,
        },
        {
          number: '1828003',
          name: '维达',
          tell: '120',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 2,
        },
        {
          number: '1828004',
          name: '小刘',
          tell: '414',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 3,
        },
        {
          number: '1828005',
          name: '熊大',
          tell: '119',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 4,
        },
        {
          number: '1828006',
          name: '熊二',
          tell: '121',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 5,
        },
      ],
      // 显示列表
      tableData: [
        {
          number: '1828001',
          name: '李四',
          tell: '10086',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 0,
        },
        {
          number: '1828002',
          name: '天一',
          tell: '110',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 1,
        },
        {
          number: '1828003',
          name: '维达',
          tell: '120',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 2,
        },
        {
          number: '1828004',
          name: '小刘',
          tell: '414',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 3,
        },
        {
          number: '1828005',
          name: '熊大',
          tell: '119',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 4,
        },
        {
          number: '1828006',
          name: '熊二',
          tell: '121',
          role: '操作员',
          position: '前端工程师',
          department: '技术部门',
          time: '2020-12-31',
          id: 5,
        },
      ],
      el_show: false,

      el_xiu: false,
      time: '',
      tell: '',
      name: '',
      number: '',
      role: '',
      position: '',
      department: '',
      newtable: {
        time: '',
        tell: '',
        number: '',
        name: '',
        role: '',
        position: '',
        department: '',
      },
      formLabelWidth: '120px',
      newid: 0,

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 查找
    search: function () {
      console.log(this.input)
      this.tableData.map((item) => {
        if (this.input == null || this.input == '') {
          this.tableData = this.searchtableData
          return
        } else if (item.number.includes(this.input)) {
          this.searchs = []
          this.searchs.push(item)
          console.log(this.searchs)
          this.tableData = this.searchs
          console.log(this.tableData)
          return
        }
      })
    },
    // 添加
    adds: function () {
      this.el_show = true
    },
    err: function () {
      this.el_show = false
    },
    // 删除
    removes: function (v) {
      console.log(v.id)
      this.newid = this.tableData.findIndex((item) => {
        return item.id == v.id
      })
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.tableData.splice(this.newid, 1)
          this.searchtableData = this.tableData
          console.log(this.tableData)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 添加按钮
    pushs: function () {
      if (!this.number || 
      !this.name || 
      !this.tell ||
      !this.role ||
      !this.position ||
      !this.department ||
      !this.time
      ) {
        this.$message.error('内容不能为空')
        return
      }
      let ids =
        Math.max(
          ...this.tableData.map(function (item) {
            return item.id
          })
        ) + 1
      this.tableData.push({
        time: this.time,
        tell: this.tell,
        number: this.number,
        name: this.name,
        role: this.role,
        position: this.position,
        department: this.department,
        id: ids,
      })
      this.searchtableData = this.tableData
      this.$message({
        message: '创建成功',
        type: 'success',
      })
      ;(this.time = ''),
        (this.tell = ''),
        (this.number = ''),
        (this.name = ''),
        (this.role = ''),
        (this.position = ''),
        (this.department = ''),
        (this.el_show = false)
    },
    // 修改按钮
    sets: function (val) {
      this.el_xiu = true

      console.log(val)
      this.newtable = {
        time: val.time,
        tell: val.tell,
        number: val.number,
        name: val.name,
        role: val.role,
        position: val.position,
        department: val.department,
        id: val.id,
      }
    },
    xg_err: function () {
      this.el_xiu = false
    },

    trueset: function () {
      console.log(this.newtable.time + '===')
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == this.newtable.id) {
          this.tableData[i].time = this.newtable.time
          this.tableData[i].tell = this.newtable.tell
          this.tableData[i].number = this.newtable.number
          this.tableData[i].name = this.newtable.name
          this.tableData[i].role = this.newtable.role
          this.tableData[i].position = this.newtable.position
          this.tableData[i].department = this.newtable.department
          this.tableData[i].id = this.newtable.id
          this.el_xiu = false
        }
      }
      this.searchtableData = this.tableData
    },
  },
}
</script>
<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .eeaymt{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>